import React, { Component } from 'react';
import ReactEcharts from 'echarts-for-react';
import axios from '../api'
import xyz from './xyz'
import titleImage from '../images/title.png';
import Top3 from './Top3'


import echarts from 'echarts';

require('echarts/map/js/china.js');

export default class SiteSta extends Component {
  constructor(props) {
    super(props);
    this.state = {
      option: {},
      siteUpTop: [],
      siteDownTop: []
    };
  }

  componentWillMount () {
    echarts.registerTheme('xyz', xyz);
  }

  componentDidMount () {
    this.tick()
    this.timerID = setInterval(
      () => this.tick(),
      15 * 60 * 1000
    );
  }

  componentWillUnmount () {
    clearInterval(this.timerID);
  }

  tick () {
    const { id } = this.props
    axios.get('/site_sta', { params: { id } }).then(res => this.genData(res))
  }

  genData ({ data: { data } }) {
    const itemStyle = (color1, color2) => ({
      color: {
        type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
        colorStops: [
          { offset: 0, color: color1 },
          { offset: 1, color: color2 }
        ]
      }
    })
    const siteUp = data.map(({ name, up }) => ({ name, value: up }))
    const siteDown = data.map(({ name, down }) => ({ name, value: -down }))
    const siteName = data.map(({ name }) => name)
    const option = {
      legend: { right: 10, top: '40%', data: [{ name: '上行客流', icon: 'rect' }, { name: '下行客流', icon: 'rect' }], orient: 'vertical' },
      grid: { right: '18%',bottom: 80 },
      xAxis: {
        type: 'category', data: siteName, axisLabel: { formatter: value => value.split('').join('\n'), interval: 0 }, splitLine: { show: false }
      },
      yAxis: { type: 'value', name: '客流量', nameTextStyle: { color: '#fff' } },
      series: [
        { type: 'bar', name: '上行客流', data: siteUp, barWidth: 6, itemStyle: itemStyle('#1688FD', '#59E8E5') },
        { type: 'bar', name: '下行客流', data: siteDown, barWidth: 6, itemStyle: itemStyle('#F71F40', '#C402EE') }
      ]
    }

    const siteUpTop = siteUp.map(item => item).sort((a, b) => b.value - a.value).slice(0, 3).map(({ name }) => name)
    const siteDownTop = siteDown.map(item => item).sort((a, b) => a.value - b.value).slice(0, 3).map(({ name }) => name)
    this.setState({ option, siteUpTop, siteDownTop })
  }

  render () {
    const { siteUpTop, siteDownTop } = this.state
    const siteTopColor = '#1688FD, #59E8E5'
    const siteDownColor = '#F71F40, #C402EE'
    return (
      <div className="site-user flex-box">
        <div className="flex-box site-user__top">
          <Top3 list={siteUpTop} colors={siteTopColor} />
          <Top3 list={siteDownTop} colors={siteDownColor} />
        </div>
        <div className="site-user__title flex-box">
          <img src={titleImage} alt="title" className="site-user__icon" />
          <div className="flex-box__item">{this.props.title}</div>
        </div>
        <div className="site-user__content flex-box">
          <div className="flex-box__item">
            <ReactEcharts
              option={this.state.option}
              notMerge={true}
              lazyUpdate={true}
              style={{ height: '100%' }}
              theme={'xyz'} />
          </div>
        </div>
      </div>
    );
  };
}